<!-- 入门导航 -->
<template>
	<section>
		<div>
			<ul class="nav-list">
				<li 
					class="nav-item align-center"
					v-for="item in lists" 
					:id="item.id"
					:key="item.id" >
					<router-link :to="item.link">
						<img :src="item.src" class="nav-img mb20rem">
						<p class="nav-name fs24rem">{{item.name}}</p>
					</router-link>
				</li>
			</ul>
		</div>
	</section>
</template>

<script>
	export default {
		name: 'EntryNav',
		props: ['lists']
	}
</script>

<style lang="less">
	.nav-list{
		width: 100%;
		height: auto;		
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.nav-item{
			padding-top: 44/28rem;
			width: 25%;
			padding-bottom: 44/28rem; 

		}
		.nav-img{
			width: 90/28rem;
			height: 90/28rem;
		}
		.nav-name{
			color: #333333;
		}
	}
</style>